<template>
  <div>
    <h1>P143 - ref函数处理对象类型</h1>
    <div>一个人的姓名:{{ name }}</div>
    <div>一个人的年龄:{{ age }}</div>
    <div>
      一个人的工作:
      <!-- 模板语法中进行读取对象类数据依然不需要.value，直接写即可 -->
      <div>工作内容:{{ job.type }}</div>
      <div>工作薪水:{{ job.salary }}</div>
    </div>
    <button @click="change">修改信息</button>
    <hr />
  </div>
</template> 
  
  <script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("hzj");
    let age = ref(18);
    // 上一节我们涉及到的都是简单的数据类型，本小节看下引用数据类型，比如对象.
    let job = ref({
      type: "前端工程师",
      salary: "18k",
    });

    function change() {
      name.value = "ljj";
      age.value = 40;

      //在js中读取或者修改对象类型的数据时，第一层需要.value读取，后面的直接点出来就可以进行读取或者修改了。不过要注意其实ref不建议用来创建对象类数据，就算你用了它也是会求助于reactive函数，这个我们下一节讲。reactive底层实现引用对象是利用了ES6中的Proxy类型也就是代理类型。
      job.value.type = "UI设计师";
      job.value.salary = "100k";
    }

    return {
      name,
      age,
      job,
      change,
    };
  },
};
</script>
  
  <style>
</style>
  